<template>
    <foreignObject v-if="this.attr.selected || this.attr.checked" 
        class="dragItem" 
        :x="attr.x" 
        :y="attr.y" 
        rx="0" 
        ry="0" 
        :width="attr.width" 
        :height="attr.height">
        <div :id="`item_drag_${attr.idx}`" 
            @mousedown.left="itemMouseDown" 
            :class="`item-shadow ${attr.lock?'lock':''}`" 
            :style="`width:${attr.width}px; height:${attr.height}px;`"></div>
    </foreignObject>
</template>
<script>
export default {
    props:{
        attr:{type:Object,default:()=>{ 
            return {x:0,y:0,width:20,height:20};
        }}    
    },
    methods:{
        itemMouseDown:function(event){
            console.log('itemMouseDown drag',event)
            if(event.button !== 0 || this.attr.lock) return;            
            this.$emit('dragDown',event)
            if(event) {
				event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
			}
        }
    }
}
</script>
<style scoped lang="scss">
    .dragItem{
        text-align: center; 
        vertical-align: middle; 
        overflow: hidden; 
        font-size: 14px; 
        font-weight: normal; 
        color: rgb(0, 0, 0); 
        font-style: normal; 
        text-decoration: none;
    }

    .item-shadow{
        border:1px #ff000059 solid;
        word-break: break-all; 
        overflow-wrap: break-word; 
        display: table-cell; 
        text-align: center; 
        vertical-align: middle; 
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.1);
        cursor: move;
    }

    .lock{
        border:1px #a19f9f solid;
    }
</style>